<template>
  <a-card :bordered="false">
    <FullCalendar class="fullCalendar" ref="fullCalendar" :options="calendarOptions" />


    <!-- table区域-end -->
    <edit-modal ref="modalForm" @ok="modalFormOk"></edit-modal>
  </a-card>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import EditModal from './modules/EditModal'
import moment from 'moment'
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
import timeGridPlugin from '@fullcalendar/timegrid'

export default {
  name: 'DepartList',
  mixins:[JeecgListMixin],
  components: {
    FullCalendar, // 像使用自定义组件一样使用
    EditModal
  },
  data() {
    return {
      // 查询条件
      disableMixinCreated:true,
      calendarOptions: {
        plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin], // 需要用哪个插件引入后放到这个数组里
        initialDate: new Date(), // 日历第一次加载时显示的初始日期。可以解析为Date的任何职包括ISO8601日期字符串，例如"2014-02-01"。
        initialView: 'dayGridMonth', // 日历加载时的初始视图，默认值为'dayGridMonth'，可以为任何可用视图的值，如例如'dayGridWeek'，'timeGridDay'，'listWeek'
        locale: 'zh-cn', // 设置日历的语言，中文为 “zh-cn”
        firstDay: '1', // 设置每周的第一天，默认值取决于当前语言环境，该值为代表星期几的数字，且值必须为整数，星期日=0
        weekNumberCalculation: 'ISO', // 指定"ISO"结果为ISO8601周数。指定"ISO"将firstDay的默认值更改为1（Monday）
        buttonText: { // 文本将显示在headerToolbar / footerToolbar的按钮上。不支持HTML注入。所有特殊字符将被转义。
          today: '今天',
          month: '月',
          week: '周'
        },
        selectable: true,//是否允许用户单击或者拖拽日历中的天和时间隙
        selectMirror: true,
        headerToolbar: { // 在日历顶部定义按钮和标题。将headerToolbar选项设置为false不会显示任何标题工具栏。可以为对象提供属性start/center/end或left/center/right。这些属性包含带有逗号/空格分隔值的字符串。用逗号分隔的值将相邻显示。用空格分隔的值之间会显示一个很小的间隙。
          right: 'today prev,next',
          center: 'title',
          left: 'dayGridMonth,dayGridWeek'
        },
        eventTimeFormat: { // 在每个事件上显示的时间的格式
          hour: 'numeric',
          minute: '2-digit',
          hour12: false
        },
        select: this.handleDateSelect,
        eventClick: this.handleEventClick,
        eventsSet: this.handleEvents
      },
      url: {
        list: '/his/scheduling/list',
        delete: '/his/scheduling',
        deleteBatch: '/his/scheduling/deleteBatch'
      }
    }
  },
  computed: {},
  methods: {
    // 点击事件 拖动时候选择
    handleDateSelect(selectInfo) {
      console.log(selectInfo)
      let start=selectInfo.startStr;
      let end=selectInfo.endStr;
      let day = new Date(end).getTime() - new Date(start).getTime();//日期转时间戳
      let dayCount = Math.floor(day / 86400000) ;//时间戳获取天数
      if(dayCount>7){
         this.$message.warn("排班时间只允许未来7天之内")
         return;
      }
      this.$refs.modalForm.add(selectInfo.startStr, selectInfo.endStr,dayCount);
    },
    handleEventClick(clickInfo) {

    },
    handleEvents(events) {

    }

  }
}
</script>
<style scoped>
@import '~@assets/less/common.less'
</style>